<template>
  <div id="viewer"></div>
</template>

<script>
import { Viewer } from 'photo-sphere-viewer'
import MarkersPlugins from 'photo-sphere-viewer/dist/plugins/markers'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import 'photo-sphere-viewer/dist/plugins/markers.css'

export default {
  props: {
    init: Object
  },
  data() {
    return {
      viewer: null, // Viewer 实例
      markersPlugin: null, // markersPlugin 实例
      longitude: '', // 目前经度
      latitude: '' // 目前纬度
    }
  },
  mounted() {
    this.initPhotoSphere(this.init)
  },
  methods: {
    initPhotoSphere: function(temp_img) {
      this.viewer = new Viewer({
        container: document.getElementById('viewer'),
        panorama: temp_img.imgurl,
        // 标题
        caption: temp_img.caption,
        navbar: temp_img.navbar,
        defaultZoomLvl:0,
        // 自定义导航下方导航栏
        // autorotate ：切换自动旋转
        // zoomOut ：放大
        // zoomRange ：缩放滑块
        // zoomIn ：缩小
        // zoom：zoomOut + zoomRange + zoomIn
        // download ：下载源图像
        // caption ：标题
        // fullscreen ：切换全屏视图
        // navbar: false 隐藏
        // navbar: [
        //   'fullscreen',
        //   'autorotate',
        //   'download',
        //   'markers',
        //   {
        //     id: 'my-button', //按钮的唯一标识符，在使用该navbar.getButton()方法时很有用
        //     content: '查看', //必需的,按钮内容
        //     title: 'Hello world', //鼠标悬停在按钮上时显示工具提示
        //     className: 'custom-button', //CSS类已添加到按钮
        //     onClick: () => {
        //       alert('Hello from 查看 button') //必需的,单击按钮时调用的函数
        //     }
        //   }
        // ],
        size: {
          width: '100%',
          height: '100vh'
        },
        plugins: [
          [
            MarkersPlugins,
            {
              // 标记
              markers: temp_img.marker
            }
          ]
        ]
      })

      // this.viewer.on('position-updated', function(po) {
      //   console.log(`
      //   目前经纬度：
      //   longitude: ${po.args[0].longitude}
      //   latitude: ${po.args[0].latitude}
      //   `)
      // })

      // 点击事件 可获取到经纬度
      this.viewer.on('click', (e, data) => {
        this.$emit('click', data)
      })

      this.markersPlugin = this.viewer.getPlugin(MarkersPlugins)

      // 标记点击事件 切换场景
      this.markersPlugin.on('select-marker', (e, marker) => {
        this.$emit('marker', marker)
      })
    },
    // 切换场景
    handelChangeViewer(imgUrl, marker = []) {
      this.viewer.setPanorama(imgUrl).then(
        () => {},
        this.viewer
          .animate({
            zoom: 50
          })
          .then(() => {
            this.markersPlugin.setMarkers(marker)
          })
      )
    }
  }
}
</script>
